<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>autoScroll</title>
</head>
<style>
    .parent {
        width: 300px;
        height: 200px;
        margin: 0 auto;
        background: #242424;
        overflow-y: scroll;
    }
    /*设置的子盒子高度大于父盒子，产生溢出效果*/
    .child {
        height: auto;
    }
    .child li {
        height: 50px;
        margin: 2px 0;
        background: #009678;
    }
</style>
<body>
<div id="parent" class="parent">
    <div id="child1" class="child">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </div>
    <div id="child2" class="child"></div>
</div>
<div>
    <button onclick="start()">开始</button>
    <button onclick="stop()">停止</button>
</div>
<script type="text/javascript">
    let timer = null
    function start() {
        var parent = document.getElementById('parent');
        var child1 = document.getElementById('child1');
        var child2 = document.getElementById('child2');
        child2.innerHTML = child1.innerHTML;
        timer = setInterval(function () {
            if(parent.scrollTop >= child1.scrollHeight) {
                parent.scrollTop = 0;
            } else {
                parent.scrollTop++;
            }
        }, 20);
    }

    function stop(){
        clearInterval(timer)
        timer = null
    }
</script>
</body>
</html>